<template>
	<div class="table-main">
		<div class="titles">
			<p>季节管理</p>
			<authCheck />
			<el-button
				size="small"
				v-if="authorize == 1"
				@click="onSeasonAdd"
				type="primary"
				>增加</el-button
			>
		</div>
		<div class="table-container">
			<!-- :header-cell-style="{ 'text-align': 'center' }" -->
			<!-- :cell-style="{ 'text-align': 'center' }" -->
			<el-table
				:data="seasonData"
				v-loading="loading"
				style="width: 100%-44px"
				height="calc(100% - 76px)"
			>
				<el-table-column label="名称" prop="name"> </el-table-column>
				<el-table-column label="起止日" prop="beginDay"> </el-table-column>
				<el-table-column label="终止日" prop="endDay"> </el-table-column>
				<el-table-column label="操作" v-if="authorize">
					<template slot-scope="scope">
						<el-button
							size="mini"
							type="normass"
							@click="handleSeasonEdit(scope.row)"
							>编辑</el-button
						>
						<el-button
							size="mini"
							type="danger"
							@click="handleSeasonDelete(scope.row.id)"
							>删除</el-button
						>
					</template>
				</el-table-column>
			</el-table>
			<div class="table-pagination">
				<el-pagination
					background
					@size-change="handleSizeChange"
					@current-change="handleCurrentChange"
					:current-page="page.pageNum"
					:page-sizes="[10, 20, 30, 40]"
					:page-size="page.pageSize"
					layout="total, sizes, prev, pager, next, jumper"
					:total="total"
				>
				</el-pagination>
			</div>
		</div>

		<el-dialog
			:title="titleCostDialog"
			:visible.sync="dialogVisible"
			width="385px"
			append-to-body
			:close-on-click-modal="false"
		>
			<el-form
				ref="seasonForm"
				:model="seasonForm"
				:rules="seasonRules"
				label-width="110px"
				size="small"
			>
				<el-form-item label="名称：" prop="name">
					<el-input
						v-model="seasonForm.name"
						placeholder="请输入名称"
						style="width: 220px"
					/>
				</el-form-item>
				<el-form-item label="起止日：" prop="beginDay">
					<el-date-picker
						v-model="seasonForm.beginDay"
						type="date"
						placeholder="选择日期"
						format="MM 月 dd 日"
						value-format="MM 月 dd 日"
						:editable="false"
					>
					</el-date-picker>
				</el-form-item>
				<el-form-item label="终止日：" prop="endDay">
					<el-date-picker
						v-model="seasonForm.endDay"
						type="date"
						placeholder="选择日期"
						format="MM 月 dd 日"
						value-format="MM 月 dd 日"
						:editable="false"
					>
					</el-date-picker>
				</el-form-item>
				<el-form-item label="复制：" prop="copyId">
					<el-select
						v-model="seasonForm.copyId"
						@change="changeCopyId"
						clearable
						placeholder="请选择"
					>
						<el-option
							v-for="item in copySeasonList"
							:key="item.id"
							:label="item.name"
							:value="item.id"
							@focus="getCopySeasonList"
						>
						</el-option>
					</el-select>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button type="primary" @click="submitCostForm" size="small"
					>确 定</el-button
				>
				<el-button @click="cancel" size="small">取 消</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
import authCheck from "@/components/authCheck.vue";
import {
	seasonList,
	addSeason,
	deleteSeason,
	editSeason,
	copySeasonList,
} from "@/api/modules/cost";

export default {
	components: { authCheck },
	props: {},
	data() {
		return {
			loading: false,
			page: {
				pageNum: 1,
				pageSize: 10,
			},
			total: 0,
			seasonData: [],
			copySeasonList: [],
			formLabelWidth: "100",
			dialogVisible: false,
			titleCostDialog: "编辑",
			seasonForm: {
				name: "",
				beginDay: "",
				endDay: "",
				copyId: "",
			},
			copyName: "",
			editId: "",
			seasonRules: {
				name: [
					{
						required: true,
						message: "请输入名称",
						trigger: "blur",
					},
				],
				beginDay: [
					{
						required: true,
						message: "请输入起止日",
						trigger: "blur",
					},
				],
				endDay: [
					{
						required: true,
						message: "请输入终止日",
						trigger: "blur",
					},
				],
			},
		};
	},
	watch: {},
	computed: {
		authorize() {
			if (
				this.$route.name !== "lunbo" &&
				this.$store.state.userInfo.authorize == 1
			) {
				return 1;
			} else {
				return 0;
			}
		},
	},
	created() {},
	mounted() {
		this.getData(this.page);
		this.getCopySeasonList();
	},
	methods: {
		getCopySeasonList() {
			copySeasonList().then((res) => {
				this.copySeasonList = res.data;
			});
		},
		//修改每页条数
		handleSizeChange(val) {
			this.page = {
				pageNum: 1,
				pageSize: val,
			};
			this.getData(this.page);
		},
		// 翻页
		handleCurrentChange(val) {
			this.page.pageNum = val;
			this.getData(this.page);
		},
		getData(page) {
			this.loading = true;
			seasonList(page).then((res) => {
				this.seasonData = res.rows;
				this.total = res.total;
				this.loading = false;
			});
		},

		onSeasonAdd() {
			this.titleCostDialog = "新增";
			this.dialogVisible = true;
		},
		handleSeasonEdit(row) {
			this.seasonForm = {
				name: row.name,
				beginDay: row.beginDay,
				endDay: row.endDay,
				copyId: row.copyId,
			};
			this.editId = row.id;
			this.titleCostDialog = "编辑";
			this.dialogVisible = true;
		},
		changeCopyId(row) {
			this.copySeasonList.forEach((item) => {
				if (item.id == row) {
					this.copyName = item.name;
				}
			});
		},
		submitCostForm() {
			this.$refs.seasonForm.validate((valid) => {
				if (valid) {
					if (this.seasonForm.copyId) {
						this.$confirm(`确认使用 [${this.copyName}] 的时段数据吗?`, "提示", {
							confirmButtonText: "确定",
							cancelButtonText: "取消",
							type: "warning",
						})
							.then(() => {
								this.submitForm();
							})
							.catch(() => {});
					} else {
						this.submitForm();
					}
				}
			});
		},
		submitForm() {
			if (this.titleCostDialog === "编辑") {
				let obj = this.seasonForm;
				obj.id = this.editId;
				editSeason(obj).then((res) => {
					this.getData(this.page);
					this.cancel();
					this.$message({
						type: "success",
						message: "修改成功!",
					});
				});
			} else {
				addSeason(this.seasonForm).then((res) => {
					this.page.pageNum = 1;
					this.getData(this.page);
					this.dialogVisible = false;
					this.cancel();
					this.$message({
						type: "success",
						message: "新增成功!",
					});
				});
			}
		},
		cancel() {
			this.seasonForm = {
				name: "",
				beginDay: "",
				endDay: "",
			};
			this.editId = "";
			this.dialogVisible = false;
		},
		handleSeasonDelete(id) {
			this.$confirm("确定删除此数据吗?", "提示", {
				confirmButtonText: "确定",
				cancelButtonText: "取消",
				type: "warning",
			})
				.then(() => {
					deleteSeason(id).then((res) => {
						this.getData(this.page);
						this.$message({
							type: "success",
							message: "删除成功!",
						});
					});
				})
				.catch(() => {
					this.$message({
						type: "info",
						message: "已取消删除",
					});
				});
		},
	},
};
</script>
<style lang="scss" scoped>
.titles {
	display: flex;
	justify-content: space-between;
	.el-button--primary {
		background-color: #045eed;
		border-color: #045eed;
		height: 36px;
		margin: 10px 10px 0 0;
	}
	.el-button {
		height: 36px;
		margin: 9px 22px 0 0;
	}
}
.table-main {
	height: 100%;
	.table-container {
		padding: 10px 22px;
		height: calc(100% - 56px);
	}
	.el-pagination {
		padding: 10px 5px 2px;
	}
}
</style>
